<script setup>
import { ref } from 'vue';
import useDesignerStore from '../../store/index';
const designerStore = useDesignerStore();
const toFixed = (num, fixed) => {
  if (typeof num!== 'number' || isNaN(num)) {
    return num;
  }
  const re = new RegExp('^-?\\d+(?:.\\d{0,' + (fixed || -1) + '})?');
  return num.toString().match(re)[0];
};
</script>
<template>
<div class="bottom-bar">
  <div class="bottom-bar-info">
    <div class="bottom-bar-info-item">
      <span>模式:</span>
      <span>{{ designerStore.mode }}</span>
    </div>
    <div class="bottom-bar-info-item">
      <span>屏幕尺寸:</span>
      <span>{{ designerStore.containerSize.width }} x {{ designerStore.containerSize.height }}</span>
    </div>
    <div class="bottom-bar-info-item">
      <span>缩放比例:</span>
      <span>{{ designerStore.scale }}</span>
    </div>
    <div class="bottom-bar-info-item">
      <span>屏幕中心点坐标:</span>
      <span>{{ designerStore.screenCenter.x }} x {{ designerStore.screenCenter.y }}</span>
    </div>
    <div class="bottom-bar-info-item">
      <span>中心点坐标:</span>
      <span>{{ toFixed(designerStore.center.x, 2) }} x {{ toFixed(designerStore.center.y, 2) }}</span>
    </div>
  </div>
</div>
</template>
<style lang="scss" scoped>
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 20px;
  z-index: 100;
  background-color: rgba(245, 245, 245, 0.66);
  display: flex;
  justify-content: center;
  align-items: center;

  .bottom-bar-info {
     display: flex;
     justify-content: center;
     align-items: center;

     .bottom-bar-info-item {
       margin: 0 10px;

       span {
         font-size: 12px;
         //font-weight: bold;
       }
     }
  }
}
</style>